
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href='http://www.iconj.com/ico/4/t/4tr0bc4r7v.ico' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='http://www.iconj.com/ico/4/t/4tr0bc4r7v.ico' rel='icon' type='image/x-icon'/>
<link href='http://fonts.googleapis.com/css?family=Acme' rel='stylesheet' type='text/css'>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animated CSS3 Navigation Menu | ONLINETRICK demo</title>

<style>
#navbar-iframe {display:none!important}
<style type="text/css">
body {
margin: 0;
font-family: "Arial";
font-size: 14px;
line-height: 1.5;
background: #FFF9DF;
text-align: center; 
}
.header{
	text-align:center;
	width:100%;
	height:30px;
	clear:both;
	background:#000;
	margin-bottom:20px;
	border-bottom:7px solid #222;
	font-size:14px;
        font-family: 'Acme', sans-serif;
	line-height:35px;
	text-shadow:1px 1px 1px #000;
}
.header a{
	color:#fff;
	text-shadow:1px 1px 1px #000;
	padding-right:20px;
        -webkit-transition: padding-left 250ms ease-out;
        -moz-transition: padding-left 250ms ease-out;
}
.header a:hover{
	color:#fff;
        padding-left: 20px;
}    
.left{
	float:left;
	margin-left:10px;
}
.back{
	position:absolute;
	right:10px;
	top:0px;
}
.footer {
	position:absolute;
	width:100%;
	height:50px;
        font-family: 'Acme', sans-serif;
	line-height:50px;
	bottom:0; /* stick to bottom */
	background:#f0f0f0;
	border-top:7px dashed yellow;
	text-align:center;
	text-shadow:1px 1px 1px #000;
	color:#fff;
	background:#000;
}
.footer a{
        text-decoration: none;
	color:#aaa;
	padding:0px 10px;
	text-shadow:1px 1px 1px #000;
        -webkit-transition: padding-left 250ms ease-out;
        -moz-transition: padding-left 250ms ease-out;
}
.footer a:hover{
	color:#fff;
	text-shadow:0px 0px 1px #fff;
        padding-left: 20px;}
#container {
margin: 20% auto 0 auto;
display: block;
width: 750px; 
text-align:center;
}
h2{clear:both;padding-top:30px;font-family: 'Acme', sans-serif;}
            #menu li {
                display: inline;
                list-style: none;
                padding: 0;
            }
            
            #menu li a {
                
                border: 1px solid #3d8bf2;
                padding: 15px 20px 15px 20px;
                text-decoration: none;
                font-family: 'Acme', sans-serif;
                color:#fff;
                margin-left: -5px;
                background-image: url('http://1.bp.blogspot.com/-OY6fy5_2VRQ/TvMX_Ghr9sI/AAAAAAAABNs/KxpX9eFD9j4/s1600/menubgot.PNG');
                background-position: left;
                -webkit-transition: all 0.7s ease-in-out;
                -moz-transition: all 0.7s ease-in-out;
                -o-transition: all 0.7s ease-in-out;
            }
            
            #menu li a:hover {
                background-position:right;
            }

#menu2 li {
                display: inline;
                list-style: none;
                padding: 0;
            }
            
            #menu2 li a {
                
                border: 1px solid #3d8bf2;
                padding: 15px 20px 15px 20px;
                text-decoration: none;
                font-family: 'Acme', sans-serif;
                color:#fff;
                margin-left: -5px;
                background-image: url('http://4.bp.blogspot.com/-XjoGtTgSA9o/TvMZmnoNaCI/AAAAAAAABN4/6fFXHwEcFck/s1600/toptodownot.PNG');
                background-position: bottom;
                -webkit-transition: all 0.6s ease-in-out;
                -moz-transition: all 0.6s ease-in-out;
                -o-transition: all 0.6s ease-in-out;
            }
            
            #menu2 li a:hover {
                background-position:top;
            }
            
</style>

<link rel="openid.server" href="http://www.blogger.com/openid-server.g" />
<!-- --><style type="text/css">@import url(http://www.blogger.com/static/v1/v-css/navbar/697174003-classic.css);
div.b-mobile {display:none;}
</style>

</head>

<body><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener("load",
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=5898368230699379375&amp;blogName=Slider&amp;publishMode=PUBLISH_MODE_BLOGSPOT&amp;navbarType=BLUE&amp;layoutType=CLASSIC&amp;searchRoot=http://menu2-onlinetrick.blogspot.com/search&amp;blogLocale=en_GB&amp;homepageUrl=http://menu2-onlinetrick.blogspot.com/&amp;vt=5962181195586858900" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" allowtransparency="true" title="Blogger Navigation and Search"></iframe>
<div></div>
<div class="header">
				<a class="left" href="http://onlinepctrick.blogspot.com/2011/12/animated-css3-navigation-menu.html"> <<< Back to the Tutorial</a>
				<a class="back" href="http://onlinepctrick.blogspot.com/"> ONLINETRICK </a>
			</div>
        <div id="container">

<h2>Example 1</h2>
<ul id="menu">
                <li> <a href="#">Home</a> </li>
                <li> <a href="#">Products</a> </li>
                <li> <a href="#">Services</a> </li>
                <li> <a href="#">About</a> </li>
                <li> <a href="#">Contact</a> </li>
            </ul>
<h2>Example 2</h2>
<ul id="menu2">
                <li> <a href="#">Home</a> </li>
                <li> <a href="#">Products</a> </li>
                <li> <a href="#">Services</a> </li>
                <li> <a href="#">About</a> </li>
                <li> <a href="#">Contact</a> </li>
            </ul></div>
<div class="footer">
				Follow us >>>
				<a href="http://twitter.com/onlinetrick">Twitter</a>|
				<a href="http://www.facebook.com/onlinetrick">Facebook</a>|
				<a href="http://feeds.feedburner.com/onlinetrick">RSS</a>
			</div></div>
<script type="text/javascript" src="http://www.blogger.com/static/v1/common/js/3407999231-csitail.js"></script>
<script type="text/javascript">BLOG_initCsi('classic_blogspot');</script></body>
</html>
